<template>
	<view>
		<view class="address">
			<van-notice-bar
			  scrollable 
			  background="#e9e9ea"
			  color="#30353a"
			  left-icon="volume-o"
			  text="双12活动期间,商品的需增,下单的商品可能延迟发货,敬请谅解,谢谢。"
			/>
		</view>
		<view class="address-info" v-if="!isShowAddress" @click="toAddress">
			<image src="/static/me/address.png" mode="aspectFill" class="place-img"></image>
			<text>添加收货地址</text>
		</view>
		<view class="du clearfix" v-else>
			<view class="info left">
				<image src="/static/me/address.png" mode="aspectFill" class="place-img1"></image>
			</view>
			<view class="info2 left">
				<view class="info-item">
					<view class="item1 item-left">
						<text>收货人:</text>
						<text class="name1">{{username}}</text>
					</view>
					<view class="item1 item-right">
						<text class="phone1">{{userphone | yinPhone}}</text>
						<image src="/static/image/right.png" mode="aspectFill" class="right-box" @click="toAddress"></image>
					</view>
				</view>
				<view class="adre">
					<text>{{useradress}}</text>
				</view>
			</view>
		</view>
		<view class="goods-detail clearfix">
			<view class="left">
				<image :src="goodsInfo.imgUrl"
					   mode="aspectFill"
					   class="goods-img"
					   ></image>
			</view>
			<view class="left right-box">
				<view class="xian-detail">
					<text>{{goodsInfo.detail}}</text>
				</view>
				<view class="gu-box">
					<text class="gui">{{goodsInfo.color}}</text>
					<text class="gui">数量x{{num}}</text>
					<text class="gui">{{goodsInfo.size}}</text>
				</view>
				<view>
					<text class="small-b">￥</text>
					<text class="big-b">{{goodsInfo.money}}</text>
				</view>
			</view>
		</view>
		<view class="introduce">
			<image class="ing" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ykv1vkf5qdf020b3c1/48f2c8a0-81bd-4b4c-9229-e4518b2cdcb2.png" mode="aspectFill"></image>
		</view>
		<view class="order1">
			<view class="order2">
				<view class="r1">
					<text class="shi">实付款：￥</text>
					<text class="xu">{{goodsInfo.money}}</text>
				</view>
				<view class="r2">
					<button class="btn33" size="mini" @click="commit">提交订单</button>
				</view>
			</view>
		</view>
		<view style="position: fixed; top: 0; left: 0;width: 750rpx; height: 1400rpx;z-index: -1; background-color: #f5f5f9;"></view>
		<!-- 弹出框 -->
		<van-dialog id="van-dialog"/>
	</view>
</template>

<script>
	import Dialog from '@/wxcomponents/vant/dialog/dialog'
	export default {
		data() {
			return {
				isShowAddress: false,
				id: '',
				username: '',
				userphone: '',
				useradress: '',
				num: 1,
				goodsInfo: JSON.parse(uni.getStorageSync('goodsInfo'))
			};
		},
		filters:{
			yinPhone(tel) {
				tel = "" + tel;
				let tel1 = tel.substr(0,3) + "****" + tel.substr(7)
				return tel1
			}
		},
		methods: {
			getAddress() {
				if(!this.id) return
				uni.showLoading({
					title: '处理中...'
				})
				uniCloud.callFunction({
					name: 'address',
					data: {
						type: 'getId',
						id: this.id
					}
				}).then(res => {
					uni.hideLoading()
					let res1 = res.result.data[0]
					this.username = res1.name
					this.userphone = res1.phone
					this.useradress = res1.address + res1.juTi
				})
			},
			toAddress() {
				uni.redirectTo({
					url: '/pages/address/address'
				})
			},
			// 提交事件
			commit() {
				//获取当前的时间
				let nowDate = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
				// 生成商品的基本信息
				let ramdomNum = this.RondomPass(11)
				//拼接上一个字母xyf
				let orderNumber = 'xyf' + ramdomNum
				let obj = {
					orderNumber: orderNumber,   //订单号
					time: nowDate,              //下单时间
					goodsInfo:  this.goodsInfo, //商品的基本信息
					num: this.num,              //商品的数量
					address: {                  //地址基本信息
						id: this.id,
						username: this.username,
						userphone: this.userphone,
						useradress: this.useradress
					}
				}
				// 如果没有填地址
				if(!this.isShowAddress) {
					Dialog.alert({
					  title: '温馨提示',
					  message: '你还没选择地址，请选择地址。。。',
					})
					return
				}
				// 如果选择地址
				if(this.isShowAddress) {
					Dialog.confirm({
					  title: '温馨提示',
					  message: '是否支付此订单',
					}).then(() => {
						// on confirm
						obj.status = 1;        //0：付款成功，待发货
						uni.showLoading({
							title: '处理中...'
						})
						uniCloud.callFunction({
							name: 'order',
							data: {
								type: 'waitFa',
								info: obj
							}
						}).then(res => {
							uni.hideLoading()
							if(res.success) {
								uni.navigateTo({
									url: '/pages/paySuccess/paySuccess'
								})
								// // 成功后，移除
								// uni.removeStorageSync('goodsInfo')
							}
						})
					})
					.catch(() => {
						// on cancel
						//给商品信息添加状态
						obj.status = 0;        //0：待付款
						uniCloud.callFunction({
							name: 'order',
							data: {
								type: 'notPay',
								info: obj
							}
						})
					});
				}
			},
			//获取随机单号
			RondomPass(number){
			  let arr = new Array;
			  let arr1 = new Array("0","1","2","3","4","5","6","7","8","9");
	
			  for(let i=0;i<number;i++){
				  let n = Math.floor(Math.random()*10);
				  arr[i] =arr1[n] ;
			  }
			  let val = arr.join("")
			  return val;
			},
		},
		onLoad(option) {
			if(option.id) {
				this.isShowAddress = true
				this.id = option.id
				this.getAddress()
			}
			else {
				this.isShowAddress = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.du {
		background-color: white;
		padding: 30rpx 30rpx;
		box-sizing: border-box;	
		.info2 {
			width: 620rpx;
			height: 100rpx;
			margin-left: 20rpx;
		}
		.info-item {
			
			display: flex;
			.item1 {
				flex: 1;
			}
			.item-left {
				text-align: left;
			}
			.item-right {
				text-align: right;
			}
			.name1 {
				margin-left: 20rpx;
			}
			.phone1 {
				margin-right: 20rpx;
			}
			.right-box {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
			
		}
	}
	.adre {
		margin-top: 15rpx;
		}
	.place-img1 {
		width: 50rpx;
		height: 50rpx;
	}
	.xian-detail {
		width: 560rpx;
		height: 100rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.address-info {
		width: $uni-width;
		height: 120rpx;
		background-color: white;
		line-height: 120rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		.place-img {
			margin-right: 20rpx;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
		}
	}
	.goods-detail {
		width: $uni-width;
		height: 240rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: white;
		box-sizing: border-box;
		padding-bottom: 30rpx;
		.goods-img {
			width: 160rpx;
			height: 160rpx;
		}
		.right-box {
			margin-left: 20rpx;
			width: 520rpx;
		}
		.gu-box {
			margin: 10rpx 0;
			color: #8c949d;
			font-size: 28rpx;
			.gui {
				margin-right: 10rpx;
			}
		}
		.small-b {
			font-size: 24rpx;
		}
		.big-b {
			font-size: 32rpx;
			font-weight: 500;
		}
		
	}
	.introduce {
		width: $uni-width;
		height: 440rpx;
		background-color: white;
		padding: 20rpx 0;
		margin-top: 20rpx;
		position: relative;
		padding-bottom: 100rpx;
		.ing {
			width: 720rpx;
			height: 460rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	.order1 {
		position: fixed;
		background-color: white;
		height: 160rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		z-index: 20;
		bottom: 0;
		width: $uni-width;
		.order2 {
			width: $uni-width;
			border-top: 2rpx solid #ddd;
			height: 120rpx;
			line-height: 120rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			.r1, .r2 {
				flex: 1;
			}
			.r1 {
				text-align: left;
			}
			.r2 {
				text-align: right;
				padding-top: 25rpx;
				line-height: 120rpx;
				height: 120rpx;
				box-sizing: border-box;
			}
			.shi {
				color: red;
				font-size: 28rpx;
			}
			.xu {
				color: red;
				font-size: 40rpx;
			}
			.btn33 {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: white;
				font-weight: 600;
				background-color: $uni-color-lightblue;
			}
		}
	}
</style>
